<template>
  <div  >
    <div class="tab-item-box" ref="tabItemBox">
      <div v-if="loaded" class="tab-item-head">
        <span class="tab-item-left">
          <el-input v-model="remark.remarkb" style="min-width: 300px" class="remark-search-input"   type="textarea" autosize  ></el-input>
          <el-button icon="el-icon-search" class="head-left-button" size="medium"  @click="headSearchFunc('搜索')">搜索</el-button>
          <el-button type="success" icon="el-icon-check" class="head-left-button"  plain size="medium"   @click="saveRemark()">备注</el-button>
        </span>
        <span class="tab-item-right">
          <el-button style="color: #ffffff" icon="el-icon-plus" size="medium" type="primary" round class="item-head-button" @click="headAddFunc">新建</el-button>
          <el-button style="color: #ffffff;" icon="el-icon-check" size="medium" type="success" round class="item-head-button" @click="headSaveFunc">保存</el-button>
        </span>
      </div>
      <!--   主要内容模块    -->
      <div class="tab-item-body" ref="tabItemBody">
        <div v-if="loaded" class="main-body-content" >
          <el-table  ref="dragTable" border :data="this.tableList"
                     highlight-current-row header-align="center" style="width: 100%" row-height="30"
                     @current-change="clickChangeTable">
            <!--                <el-table-column-->
            <!--                    width="50">-->
            <!--                </el-table-column>-->
            <el-table-column
                property="id"
                label="方案id"
                align="center"
                width="100">
              <template  slot-scope="scope">
                <span>{{scope.row.proj!=-1?scope.row.proj:'未更新'}}</span>
              </template>
            </el-table-column>
            <el-table-column height="60px"
                             align="center"
                             property="remark"
                             label="备注remark"
                             width="300">
              <template  slot-scope="scope">
                <el-input size="small" v-model="scope.row.remark" @input="changeRow[scope.$index]=true" style="width:200px; " ></el-input>
                <el-button
                    v-if="changeRow[scope.$index]"
                    size="small" plain type="primary" icon=""
                    @click="saveChangeRow(scope.$index, scope.row)">保存</el-button>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                property="goods"
                label="奖励列表"
                min-width="600px">
              <template  slot-scope="scope">
                {{scope.row }}
                <reward :gindex="scope.$index"></reward>
              </template>
            </el-table-column>
            <el-table-column label="操作"  align="center" width="250px" class="action-column">
              <template slot-scope="scope">
                <el-button
                    size="small" plain type="primary" icon="el-icon-document-copy" class="ly-mini-button"
                    @click="clickCloneTable(scope.$index, scope.row)">克隆</el-button>
                <el-button
                    size="small" plain type="primary" icon="el-icon-info"  class="ly-mini-button"
                    @click="clickInfoTable(scope.$index, scope.row)">详情</el-button>
                <el-button
                    size="small" type="danger" plain icon="el-icon-delete"  class="ly-mini-button"
                    @click="deleteCloneTable(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <p>ssssssss</p>
        <p>sssssssddddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddss</p>
        <p>sssssssddddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddss</p>
        <p>sssssssddddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddss</p>
        <p>sssssssddddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddss</p>
        <p>sssssssddddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddss</p>

        <span class="scroll-top"  @click="scrollToTop">
          <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="点击返回最上，向上滚动展示导航条">
            <span slot="reference" >
              <i class="el-icon-upload2"></i>
            </span>
          </el-popover>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '../../common/bus';
import Sortable from 'sortablejs'
import Reward from "./reward";
export default {
  name: "index",
  components: {Reward},
  data(){
    return{
      loaded: true,
      rules: {  },
      itemData: {
        tableList: [{id:0,remark:'remark0',goods:'[1,2,3]'},{id:1,remark:'remark1',goods:'[1,2,3]'}],
      },
      changeRow: {},
      tableList: [],
      remark: {}
    }
  },
  beforeMount() {
  },
  mounted() {
    const myDiv = this.$refs.tabItemBox;
    myDiv.addEventListener('wheel', this.handleWheel);

    // console.log('this.$refs.dragTable', this.$refs.dragTable)
    this.setSort()
  },
  beforeDestroy() {
    const myDiv = this.$refs.tabItemBox;
    myDiv.removeEventListener('wheel', this.handleWheel);
  },
  created() {
    // this.itemData = this.$store.state.itemData
    // this.remark = this.itemData.remark
    // this.limit = this.itemData.basic
    // this.tableList = this.itemData.tableList
    this.tableList = this.$store.state.itemData.tableList

  },


  methods:{
    //改变选择
    clickChangeTable(){
      // console.log('切换了选中条目,clickChangeTable')
    },

    //table的保存
    saveChangeRow(index,row){
      this.changeRow[index] = false
      this.initAll();
    },

    //操作详情
    clickInfoTable(index,row){
    },
    deleteCloneTable(index,row){
    },
    clickCloneTable(index,row){
    },





    /*================头部操作、统一放在这里==============*/
    //搜索按钮
    headSearchFunc(){

    },
    //通用备注保存
    async saveRemark(){
      let param = {
        action : 'update_method',
        data: {
          "remark": this.itemData.remark
        },
        project: this.$route.query.project
      }
      let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
      if(res.status == 200){
        this.$message.success('update success')
      }else {
        this.$message.error(`${res.info}`)
      }
    },
    //头部添加
    headAddFunc(){

    },
    /*头部保存*/
    //请求预检校验 + 请求正式发送
    async headSaveFunc(){
      let validate = true
      this.$refs.formData.validate(res=>{
        console.log(res)
        validate = res
      })
      console.log(this.itemData)
      if(this.itemData.version >= 0 && this.itemData.version){
      }else {
        this.$message.warning('请输入正确版本号')
        return
      }
      if(validate){
        this.$message.success('校验通过')
      }else {
        this.$message.warning('校验不通过')
        return
      }
      console.log(this.itemData)

      this.headSavePost()
    },
    async headSavePost(){
      let param = {
        action : 'update_method',
        data: this.itemData,
        project: this.$route.query.project
      }
      let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
      if(res.status == 200){
        this.$message.success('update success')
        this.tableList = res.data
        this.emitInitPage()
      }else {
        this.$message.error(`${res.info}`)
      }
    },



    /*============= 校验规则================*/
    //大于-1
    validateNumber(rule, value, callback) {
      const number = parseInt(value);
      if (isNaN(number) || number < 0) {
        callback(new Error('请输入大于-1的整数'));
      } else {
        callback();
      }
    },

    /*================通用事件,非特殊情况不用处理==============*/
    //监听滚动事件
    handleWheel(event) {
      //触发父级head bar
      this.emitHandleWheel(event)

      const tabItemBox = this.$refs.tabItemBox;
      if (event.deltaY > 0) {
        if(tabItemBox) tabItemBox.style.height = 'calc(100vh - 180px)';

      } else {
        tabItemBox.style.height = 'calc(100vh - 245px)';
      }
    },
    //通过event bus来控制主要框架的行为
    //切换tab 、重绘页面 、重载页面
    emitChangeTab(){
      bus.$emit('change-tab', {tabIndex: 'tab1'});
    },
    emitReloadPage(){
      bus.$emit('reload-page', {tabIndex: 'tab0'});
    },
    emitInitPage(){
      bus.$emit('init-page', 'msg');
    },
    emitHandleWheel(event){
      bus.$emit('handle-wheel', {event:event});
    },


    /*=================滚动置顶通用操作=================*/
    scrollToTop() {
      this.$refs.tabItemBody.scrollIntoView({ behavior: 'smooth', block: 'start' });
      this.handleWheel({deltaY:-1}) //模拟向上滚
    },

    /*===================拖拽=====================*/
    setSort() {
      // console.log('this.$refs.dragTable', this.$refs.dragTable)
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function (dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          //TODO 剪切出来放到指定地方
          const targetRow = this.tableList.splice(evt.oldIndex, 1)[0]
          this.tableList.splice(evt.newIndex, 0, targetRow)

          //拖动仅仅会触发此onEnd函数，不会改变数组
          //若需要改变数组，请手动改变
          // console.log('this.itemData.tableList',this.itemData.tableList)
          // console.log('this.tableList',this.tableList)
          // this.tableList = this.itemData.tableList

          this.loaded = false
          this.$nextTick(() => {
            this.loaded = true
            this.$nextTick(() => {
              this.loaded = true
              this.setSort()
            })
          })
        }
      })
    }

  }

}
</script>

<style scoped>
.tab-item-box{
  height: calc(100vh - 245px);
}

.tab-item-head{
  position: sticky;
  top: 0;
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px 0;
  /*background-color: rgba(0, 255, 149, 0.1);*/
  box-shadow: 0px 10px 10px white;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.8);
}
.tab-item-left{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.remark-search-input{
  margin-right: 10px;
  width: 200px;
}
.el-textarea__inner{
  height: 36px!important;
}
.tab-item-right{

}
.tab-item-body{
  position: relative;
  /*background-color: #409EFF;*/
  /*height: 150vh;*/
}
.main-body-content{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

/*模块通用操作*/
.scroll-top{
  position: sticky;
  left: 100%;
  bottom: 3px;

  padding: 6px 8px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 5px;
  text-align: center;

  background-color: #f2f5f6;
  box-shadow: 0 0 3px 2px rgba(25,137,250, .1);
  border: 1px solid #cae4fd;
  color: #1989fa;
  opacity: 0.9;
}
.scroll-top:hover{
  cursor: pointer;
}


/*按钮设置*/
.ly-mini-button{
  padding: 8px 10px!important;
}
.click-back:hover{
  cursor: pointer;
}
</style>